<template>
	<view>
		<tt-bar leftIcon="icon-back" title="修改个人资料"></tt-bar>
		<view class="setList">
			<view class="row tapBg" >
				<avatar ref="avatar" selWidth="200px" selHeight="200px" noTab="true" inner="true" @upload="myUpload" :avatarSrc="img?img:'../../static/userPic.png'"
				 avatarStyle="width: 100upx; height: 100upx; border-radius: 100%;margin-right:20upx;"></avatar>
				<!-- <image src="../../static/et4.png"></image> -->
				<text class="setLabel" @tap="changeImg">修改头像</text>
				<text class="iconfont icon-right" @tap="changeImg"></text>
			</view>
			<view class="row telForm">
				<view class="formRow">
					<text class="fromLabel">昵称</text>
					<input type="text" placeholder="请输入昵称" v-model="nick" />
				</view>
				<view class="formRow">
					<text class="fromLabel">性别</text>
					<input type="text"  disabled="disabled" v-model="sexArr[sex]" @tap="showPicker"/>
				</view>
				<view class="formRow">
					<text class="fromLabel">生日</text>
					<input type="text" placeholder="点击选择生日" v-model="choseNYR" @tap="showDate" disabled="disabled" />
				</view>
			</view>
		</view>
		<view class="btnBox">
			<button class="tapOpt" @tap="save">保存</button>
		</view>
		<w-picker
			mode="selector" 
			:defaultVal="dfv"
			@confirm="onConfirm" 
			ref="selector" 
			themeColor="#f00"
			:selectList="selectList"
		></w-picker>
		
		<w-picker 
		    mode="date" 
		    startYear="1900" 
		    :endYear="yearNow"
		    :defaultVal="nyr"
		    :current="false" 
		    @confirm="selectNYR"
		    :disabledAfter="false"
		    ref="date" 
		    themeColor="#f00"
		></w-picker>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import avatar from "@/pagesA/components/yq-avatar/yq-avatar.vue";
	import wPicker from "@/pagesA/components/w-picker/w-picker.vue";
	import API from "@/common/api.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		components: {
			ttBar,
			avatar,
			wPicker
		},
		data() {
			return {
				sexArr:['未选择','男','女'],
				selectList:[{
					label:"未选择",
					value:0
				},{
					label:"男",
					value:1
				},{
					label:"女",
					value:2
				}],
				dfv:['未选择'],
				age:0,
				sex:0,
				nick:'',
				img:'',
				yearNow:'',
				nyr:[],
				choseNYR:''
			};
		},
		methods:{
			myUpload(rsp) {
				this.userPic = rsp.path;
				uni.showLoading({
					title: '图片上传中',
					mask: false
				});
				
				API.uploadSingleImg(rsp.path, "file").then(upRes => {
					this.img=upRes.data.data.url
					uni.hideLoading()
					
				})
			},
			changeImg(){
				this.$refs.avatar.fChooseImg({
					selWidth: "200px", selHeight: "200px",
					expWidth: '200px', expHeight: '200px'
				});
			},
			save(){
				let nkreg=/^.{4,20}$/
				if(!this.nick){
					uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					});
				}else if(!nkreg.test(this.nick)){
					uni.showToast({
						title: '昵称长度为为4-20个字符',
						icon: 'none'
					});
				}else{
					this.$store.dispatch("eidtUserInfo",{
						userId:this.userInfo.userId,
						birthday: this.choseNYR,
						nickname:this.nick,
						sex:this.sex,
						pic:this.img
					}).then(res=>{
						
						this.userInfo.birthday=this.choseNYR;
						this.userInfo.sex=this.sex;
						this.userInfo.nickname=this.nick;
						this.userInfo.pic=this.img;
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
						
						this.$store.dispatch("timEditInfo",{
							nick:this.nick,
							avatar:this.img,
							role:1
						}).then(timRes=>{
							
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					});
				}
				
			},
			showPicker(){
				this.$refs.selector.show()
			},
			onConfirm(e){
				console.log(e);
				this.sex=e.checkArr.value
			},
			selectNYR(e){
				console.log(e);
				this.nyr=e.checkArr
				this.choseNYR=e.result
			},
			showDate(){
				this.$refs.date.show()
			}
		},
		onLoad() {
			
			setTimeout(()=>{
				this.img=this.userInfo.pic
				this.nick=this.userInfo.nickname
				this.dfv=[this.sexArr[this.userInfo.sex]];
				let _date=new Date().pattern("yyyy-MM-dd");
				let _dateArr=_date.split('-');
				this.yearNow=_dateArr[0];
				if(this.userInfo.birthday){
					this.choseNYR=this.userInfo.birthday;
					this.nyr=this.userInfo.birthday.split('-')
				}else{
					this.nyr=_dateArr;
				}
			},50)
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.setList {
		margin-top: 26upx;
		padding: 0 18upx;
		display: flex;
		flex-direction: column;

		.row {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 20upx 40upx 20upx 40upx;
			border-radius: 16upx;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			margin-bottom: 10upx;

			.setLabel {
				font-size: 28rpx;
				color: #202932;
				flex: 1;
			}
			image{
				width: 100upx;
				height: 100upx;
				margin-right: 20upx;
			}
			.iconfont {
				color: #908bad;
			}

			.listRight {
				font-size: 28rpx;
				color: #ff7d27;
			}

			.listRight2 {
				font-size: 28upx;
				color: #202932;
			}
		}
	}
	.telForm{
		padding: 10upx 40upx 10upx 50upx!important;
		display: flex;
		flex-direction: column;
		.formRow{
			width: 100%;
			display: flex;
			align-items: baseline;
			border-bottom: 1px solid #e7e7e7;
			padding: 40upx 0;
			.fromLabel{
				font-size: 28rpx;
					color: #202932;
					flex-shrink: 0;
					margin-right: 30upx;
					
			}
			input{
				flex: 1;
				font-size: 28upx;
			}
			button{
				font-size: 28upx;
				border: none;
				padding: 0;
				margin: 0;
				background-color: rgba(0,0,0,0);
				color: #ffa524;
				flex-shrink: 0;
				line-height: 28upx;
			}
			button:after{
				border: none;
				outline: none;
			}
			.disabled{
				color: #CCCCCC;
			}
		}
		.formRow:last-child{
			border: none;
		}
	}

	.btnBox {
		position: absolute;
		bottom: 50upx;
		width: 100%;
		left: 0;
		padding: 0 98upx;

		button {
			height: 88rpx;
			background-color: #ffb423;
			border-radius: 44rpx;
			border-radius: 44upx;
			border: none;
			line-height: 88upx;
			color: #FFFFFF;
			font-size: 32upx;
		}

		button:after {
			border: none;
		}
	}
</style>
